<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/turn.min.js"></script>
<style type="text/css">
    body{
        background:#ccc;
    }
    #magazine{
        width:1152px;
        height:752px;
    }
    #magazine .turn-page{
        background-color:#ccc;
        background-size:100% 100%;
    }

    #bg
    {
        position:relative;
        width: 100%;
        height: 100%;
    }
    </style>
<body>

<div id="magazine">
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>
    <div style="background-image:url(../img/student.png); position: relative;width: 100%;height: 100%"></div>

</div>


</body>


<script type="text/javascript">
    $(window).ready(function() {
        $('#magazine').turn({
            display: 'double',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
            turned: function(e, page) {
                /*console.log('Current view: ', $(this).turn('view'));*/
            }
        }
    });
    });
    $(window).bind('keydown', function(e){
        if (e.keyCode==37)
        $('#magazine').turn('previous');
        else if (e.keyCode==39)
        $('#magazine').turn('next');
    });
</script>

</html>